// Styles used for the Admin Users page and Users details page

%user-class-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  margin-top: 2px;
  margin-bottom: 2px;
  color: #ffffff;
}

%credential-property-label {
  display: inline-block;
  padding: 2px 4px;
  border-radius: 2px;
  margin-top: 2px;
  margin-bottom: 2px;
}

.admin-user-filters {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;

  margin-bottom: 20px;

  >.search-icon {
    @extend %pseudo-img-tag;
    background-image: url("/search.svg");
    background-size: 24px 24px;
    background-position: center;
    display: inline-block;
    width: 28px;
    height: 28px;
    flex: 0 1 auto;
  }

  >input.search-bar {
    flex: 1 1 auto;
    padding: 4px;
  }

  .filter-user-classes {
    margin-left: 20px;
    flex: 0 1 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    .show-label {
    }
    .filter-boxes {
      flex: 0 1 auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
    }
  }
}

.user-class-admin {
  @extend %user-class-label;
  background-color: #C66822;
}
.user-class-user {
  @extend %user-class-label;
  background-color: #7EB54D;
}
.user-class-visitor {
  @extend %user-class-label;
  background-color: #939393;
}

.admin-user-table {
  border: 1px solid $default-table-border-color;

  div[role=columnheader] {
    // Column header text should "stick" to the bottom of the row, to be
    // closest to the contents of the column.
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
  }

  div[role=columnheader], div[role=gridcell] {
    padding: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-row {
    display: flex;
    flex-direction: row;
    align-items: stretch; // so the border-left covers the whole height of the row
    justify-content: flex-start;
    background-color: $default-table-header-background-color;
    color: $default-table-header-foreground-color;
    border-bottom: 1px solid $default-table-header-border-color;
    >div[role=columnheader]:not(:first-child) {
      border-left: 1px solid $default-table-header-border-color;
    }
    .created, .last-active {
      cursor: pointer;
    }
  }

  .loading-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .invite-row {
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: $default-table-row-action-background-color;
    cursor: pointer;

    .plus-icon {
      @extend %pseudo-img-tag;
      display: inline-block;
      width: 24px;
      height: 24px;
      background-image: url("/plus-9E40B5.svg");
    }

    &:hover {
      background-color: $default-table-row-action-background-color-hover;
      .plus-icon {
        background-image: url("/plus-6A237C.svg");
      }
    }

    .invite-link {
      padding-left: 8px;
      padding-top: 8px;
      >a {
        color: #000000;
      }
    }
  }

  .account-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: $default-table-row-background-color;
    cursor: pointer;
    &:not(:last-child) {
      border-bottom: 1px solid #dddddd;
    }
    &:hover {
      background-color: $default-table-row-background-color-hover;
    }
  }

  div.account-role {
    flex: none;
    width: 32px;
    text-align: center;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    &[role=gridcell] {
      padding-top: 6px;
    }
  }

  div.profile-name {
    display: inline-block;
    flex: 2 1 0;
    overflow: hidden;
    text-overflow: ellipsis;

    &[role=gridcell] {
      padding-top: 8px;
    }
  }

  div.credentials {
    display: inline-block;
    flex: 2 1 0;
    &[role=gridcell] {
      overflow: hidden;
      text-overflow: ellipsis;

      .credential-list {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 4px;
        padding-bottom: 0;
        list-style-type: none;
        display: flex;
        flex-direction: column;
        align-items: stretch; // so the childrens borders will span the whole row
        justify-content: flex-start;

        .credential {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          justify-content: flex-start;

          &:not(:first-child) {
            padding-top: 4px;
            border-top: 1px solid #dddddd;
          }

          &:not(:last-child) {
            padding-bottom: 4px;
          }

          .login-provider-icon {
            align-self: flex-start;
            @extend %login-provider-icon;
            width: 32px;
            height: 24px;
          }

          .credential-intrinsic-name {
            flex: 0 1 1;
            padding-left: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  div.created, div.last-active {
    display: inline-block;
    max-width: 20%;
    flex: 1 1 0;

    &[role=gridcell] {
      padding-top: 8px;
    }
  }

  div.actions {
    flex: none;
    width: 70px;

    &[role=gridcell] {
      text-align: right;

      .manage-user-button {
        display: inline-block;
        font-weight: normal;
        @extend %button-base;
        @extend %button-secondary;
      }
    }
  }
}

.role-explanations {
  list-style-type: none;
  padding: 0;
  margin-bottom: 16px;
  >li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 8px;

    color: #5d5d5d;
    &.current-role {
      color: black;
    }

    .role {
      flex: 0 1 auto;
      width: 7em;
    }

    .explanation {
      padding-left: 8px;
      flex: 1 1 auto;
    }

    .current-role-label {
      display: inline-block;
      padding: 2px 4px;
      border-radius: 2px;
      margin-top: 2px;
      margin-bottom: 2px;

      background-color: #dcefdd;
    }

    .user-class-label {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 2px;
      margin-top: 2px;
      margin-bottom: 2px;

    }

    &.current-role {
      .user-class-label {
        &.admin {
          color: #ffffff;
          background-color: #C66822;
        }
        &.user {
          color: #ffffff;
          background-color: #7EB54D;
        }
        &.visitor {
          color: #ffffff;
          background-color: #939393;
        }
      }
    }
  }
}

.admin-users-profile-information {
  background-color: white;
  list-style-type: none;
  margin: 0;
  padding: 0;
  >li {
    min-height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .profile-picture-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    .profile-picture {
      @extend %pseudo-img-tag;
      flex: none;
      display: inline-block;
      width: 36px;
      height: 36px;
      font-size: 0px;
    }

    .profile-name {
      flex: 1 1 auto;
      margin-left: 8px;
    }
  }

  .profile-handle {
    .profile-handle-decorator {
      flex: none;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      font-weight: bold;
      color: #cccccc;
    }
    code {
      flex: 1 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 8px;
    }
  }

  .profile-pronouns {
    .profile-pronouns-decorator {
      flex: none;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      .profile-pronouns-icon {
        @extend %pseudo-img-tag;
        width: 24px;
        height: 24px;
        background-image: url('/pronoun-m.svg');
        opacity: .60; // Hack to get this to look a desired intermediate color.  The icon lines are
                      // too thin for it to look normal if the color matches the rest.
        display: inline-block;
        font-size: 0px;
      }
    }

    .profile-pronouns-preference {
      margin-left: 8px;
    }
  }
}

.user-details-name {
  padding-bottom: 8px;
  border-bottom: 1px solid #dddddd;
}

.admin-user-roles-form {
  display: inline-block;

  .make-admin, .make-user, .make-visitor {
    @extend %button-base;
    @extend %button-secondary;
  }
}

.admin-user-credential-list {
  border: 1px solid $default-table-border-color;

  div[role=columnheader] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
  }

  div[role=columnheader], div[role=gridcell] {
    padding: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .admin-user-credential-header {
    .admin-user-credential-header-row {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: flex-start;
      background-color: $default-table-header-background-color;
      color: $default-table-header-foreground-color;
      border-bottom: 1px solid $default-table-header-border-color;

      >div[role=columnheader]:not(:first-child) {
        border-left: 1px solid $default-table-header-border-color;
      }

      .admin-user-credential-header-cell {
        display: inline-block;
        &.credential {
          flex: 4 1 0;
        }

        &.created, &.last-active, &.properties {
          flex: 1 1 0;
        }
      }
    }
  }

  .admin-user-credential-body {
    .admin-user-credential-body-row {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      background-color: $default-table-row-background-color;
      &:not(:last-child) {
        border-bottom: 1px solid #dddddd;
      }

      .admin-user-credential-body-cell {
        display: inline-block;
        &.credential {
          flex: 4 1 0;
        }

        &.created, &.last-active, &.properties {
          flex: 1 1 0;
        }
      }
    }
  }

  .credential-information {
    list-style-type: none;
    margin: 0;
    padding: 0;
    >li {
      min-height: 36px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
    }
  }

  .credential-provider {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    .login-provider-icon {
      @extend %login-provider-icon;
      flex: none;
      width: 36px;
      height: 36px;
    }
    .intrinsic-name {
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 8px;
    }
  }

  .credential-emails {
    overflow: wrap;
    .credential-emails-decorator {
      // The email list may be multiple lines long, so this decorator is better off sticking to the
      // top of its box.
      align-self: flex-start;
      flex: none;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      .credential-emails-icon {
        @extend %pseudo-img-tag;
        width: 24px;
        height: 24px;
        background-image: url('/email.svg');
        display: inline-block;
        font-size: 0px;
      }
    }

    .credential-emails-list {
      flex: 1 1 auto;
      list-style-type: none;
      padding-left: 8px;
      margin: 0;
      overflow: hidden;
      >li {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .login-credential {
    @extend %credential-property-label;
    background-color: #dcefdd;
  }

  .org-member {
    @extend %credential-property-label;
    background-color: #dbdbdb;
  }

  .email-primary {
    @extend %credential-property-label;
    background-color: #e5e1ef;
  }

  .email-verified {
    @extend %credential-property-label;
    background-color: #dcefdd;
  }

  .email-unverified {
    @extend %credential-property-label;
    background-color: #efdcdd;
  }
}

.admin-invite-email-form, .admin-invite-button-form {
  @extend %standard-form;
}

.admin-invite-email-form {
  textarea {
    min-height: 200px;
  }
}
